import React from 'react';
import ReactDOM from 'react-dom';

import '@alifd/next/dist/next.min.css';
import { Search, Nav, Shell, ResponsiveGrid } from '@alifd/next';

import Clock from './clock';
import FileSearch from './search';


const { SubNav, Item, Group, Divider } = Nav;
const { Cell } = ResponsiveGrid


class Toggle extends React.Component {
  constructor(props) {
    super(props);
    this.state = {isToggleOn: true};

    // This binding is necessary to make `this` work in the callback
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState(state => ({
      isToggleOn: !state.isToggleOn
    }));
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        {this.state.isToggleOn ? 'ON' : 'OFF'}
      </button>
    );
  }
}


function UserGreeting(props) {
  return <h1>Welcome back!</h1>;
}

function GuestGreeting(props) {
  return <h1>Please sign up.</h1>;
}


function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {
    return <UserGreeting />;
  }
  return <GuestGreeting />;
}


function LoginButton(props) {
  return (
    <button onClick={props.onClick}>
      Login
    </button>
  );
}

function LogoutButton(props) {
  return (
    <button onClick={props.onClick}>
      Logout
    </button>
  );
}

class LoginControl extends React.Component {
  constructor(props) {
    super(props);
    this.handleLoginClick = this.handleLoginClick.bind(this);
    this.handleLogoutClick = this.handleLogoutClick.bind(this);
    this.state = {isLoggedIn: false};
  }

  handleLoginClick() {
    this.setState({isLoggedIn: true});
  }

  handleLogoutClick() {
    this.setState({isLoggedIn: false});
  }

  render() {
    const isLoggedIn = this.state.isLoggedIn;
    let button;
    if (isLoggedIn) {
      button = <LogoutButton onClick={this.handleLogoutClick} />;
    } else {
      button = <LoginButton onClick={this.handleLoginClick} />;
    }

    return (
      <div>
        <Greeting isLoggedIn={isLoggedIn} />
        {button}
      </div>
    );
  }
}


class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({value: event.target.value});
  }

  handleSubmit(event) {
    alert('A name was submitted: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" value={this.state.value} onChange={this.handleChange} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}


class Reservation extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isGoing: true,
      numberOfGuests: 2
    };

    this.handleInputChange = this.handleInputChange.bind(this);
  }

  handleInputChange(event) {
    const target = event.target;
    const value = target.name === 'isGoing' ? target.checked : target.value;
    const name = target.name;

    this.setState({
      [name]: value
    });
  }

  render() {
    return (
      <form>
        <label>
          Is going:
          <input
            name="isGoing"
            type="checkbox"
            checked={this.state.isGoing}
            onChange={this.handleInputChange} />
        </label>
        <br />
        <label>
          Number of guests:
          <input
            name="numberOfGuests"
            type="number"
            value={this.state.numberOfGuests}
            onChange={this.handleInputChange} />
        </label>
      </form>
    );
  }
}


class App extends React.Component {
  constructor(props) {
      super(props);
      this.state = {
          device: 'desktop',
          ds: ['desktop', 'tablet', 'phone']
      };

      this.onChange = this.onChange.bind(this);
  }

  onChange(d) {
      this.setState({
          device: d
        });
  };
  render() {
    return (
      <div>
            <Shell className={"iframe-hack"} device={this.state.device} style={{border: '1px solid #eee'}}>
                <Shell.Branding>
                    <div className="rectangular"></div>
                    <span style={{marginLeft: 10}}>App Name</span>
                </Shell.Branding>
                <Shell.Navigation direction="hoz">
                    <Search key="2" shape="simple" type="dark" palceholder="Search" style={{width: '200px'}}/>
                </Shell.Navigation>

                <Shell.Navigation>
                    <Nav embeddable  aria-label="global navigation">
                        <Nav.Item icon="account">Nav Item 1</Nav.Item>
                    </Nav>
                </Shell.Navigation>

                <Shell.Content>
                    <div style={{minHeight: 1200, background: '#fff'}}>
                      <br />
                      <div className={`list-item ${this.state.device}`}>
                          {/* <Radio.Group shape="button" onChange={this.onChange} dataSource={this.state.ds} defaultValue="desktop"/> */}
                          <ResponsiveGrid gap={10} device={this.state.device}>
                            <Cell className="mygrid grid-12" colSpan={12}><Clock /></Cell>
                            <Cell className="mygrid grid-6" colSpan={6}><Toggle /></Cell>
                            <Cell className="mygrid grid-6" colSpan={6}><LoginControl /></Cell>
                            <Cell className="mygrid grid-4" colSpan={4}><NameForm /></Cell>
                            <Cell className="mygrid grid-4" colSpan={4}><Reservation /></Cell>
                            <Cell className="mygrid grid-12" colSpan={12}><FileSearch /></Cell> 
                          </ResponsiveGrid>
                      </div>
                    </div>
                </Shell.Content>
            </Shell>
        </div>
    );
  }
}


ReactDOM.render(
  <App />,
  document.getElementById('root')
);
